<template>
    <div>
        <wd-header>
            <span class="iconfont" @click="goback" slot="left">&#xe697;订单确认</span>
        </wd-header>
        <div>
            <div class="top">
                <div class="topLeft">
                    <img :src="imgurl" alt="加载中…">
                </div>
                <div class="topRight">
                    <h3>{{title}}</h3>
                    <div>
                        <p>{{content.length > 15 ? content.substring(0,20)+'...' :content}}</p>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="divider"></div>
            <div class="content">
                <p>
                    <span>订阅价格</span>
                    <span><i>{{price}}</i>元</span>
                </p>
                <p>
                    <span>应得积分</span>
                    <span><i>{{price}}</i>分</span>
                </p>
            </div>
            <div class="bottom">
                <h3>获得优惠</h3>
                <p>1.邀请5个好友注册体验，价格低至100元。</p>
                <p>2.邀请6个及以上可获得其他优惠，详见邀请好友页面。</p>
                <p>3.订阅刘健记忆法系列视频，赠送古文记忆视频。</p>
            </div>
            <div class="footer">
                <button @click="topay">确认支付</button>
                <button @click="invite">邀请好友</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'singlevideopay',
    data() {
        return {
            price: null,
            auth: JSON.parse(localStorage.user),
            priceurl: 'http://www.jydsapp.com/jydsApi/api/h5/pay/getOrderPrice',
            payurl: 'http://www.jydsapp.com/jydsApi/api/h5/pay/wxPayQRCode',
            appId: null,
            timeStamp: null,
            nonceStr: null,
            package: null,
            signType: null,
            paySign: null,
            checkcode: null //验签
        }
    },
    created() {
        this.getData()
    },
    computed: {
        payid() {
            return this.$store.state.video_single_pay_data.payid
        },
        paytype() {
            return this.$store.state.video_single_pay_data.paytype
        },
        imgurl() {
            return this.$store.state.video_single_pay_data.imgurl
        },
        title() {
            return this.$store.state.video_single_pay_data.title
        },
        content() {
            return this.$store.state.video_single_pay_data.content
        },
        openid() {
            return this.$store.state.openid
        }
    },
    beforeRouteLeave(to, from, next) {
        let that = this
        if (to.name === 'allvideolist') {
            that.$MessageBox.confirm({
                text: '是否退出支付',
                onConfirm(instance) {
                    next()
                    instance.open = false
                },
                onCancel(instance) {
                    that.$router.replace('/singlevideopay')
                    instance.open = false
                }
            })
        } else {
            next()
        }
    },
    methods: {
        topay() {
            let str = `{"phoneNum":"${this.auth.user.phoneNum}","lessonId":"${this.payid}","type":"2","openid":"${this.openid}"}`
            this.fetch({
                method: 'post',
                url: this.payurl,
                params: {
                    "paramStr": str
                }
            }).then((response) => {
                let res = response.data
                if (res.code == 200) {
                    let paydata = JSON.parse(res.data)
                    this.appId = paydata.appId
                    this.timeStamp = paydata.timeStamp
                    this.nonceStr = paydata.nonce_str
                    this.package = paydata.prepay_id
                    this.signType = paydata.signType
                    this.paySign = paydata.sign
                    this.checkcode = paydata.out_trade_no
                    this.realPay()
                } 
            }).catch((err) => {

            })
        },
        realPay() {
            let that = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": this.appId, //公众号名称，由商户传入     
                    "timeStamp": this.timeStamp, //时间戳，自1970年以来的秒数     
                    "nonceStr": this.nonceStr, //随机串     
                    "package": this.package,
                    "signType": this.signType, //微信签名方式：     
                    "paySign": this.paySign //微信签名 
                },
                function(result) {
                    if (result.err_msg == "get_brand_wcpay_request:cancel") {
                        that.$Toast({
                            content: '支付取消'
                        })
                    } else {
                        let str = `{"phoneNum":"${that.auth.user.phoneNum}","out_trade_no":"${that.checkcode}"}`
                        that.fetch({
                            method: 'post',
                            url: that.paycheck,
                            params: {
                                "paramStr": str
                            }
                        }).then((response) => {
                            let res = JSON.parse(response)
                            if (res.data.code == 200) {
                                that.$router.replace('/allvideolist')
                            } 
                        }).catch((err) => {

                        })
                    }
                }
            )
        },
        goback() {
            this.$router.go(-1)
        },
        invite() {
            this.$router.push('/invitefriends')
        },
        getData() {
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","objectId":"${this.payid}","payType":"${this.paytype}"}`
            this.fetch({
                method: 'post',
                url: this.priceurl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                if (data.data.code == 200) {
                    let res = JSON.parse(data.data.data)
                    this.price = res.discountPrice
                } else if (data.data.code == 103) {
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    this.$Toast({
                        content: data.data.message
                    })
                }
            }).catch((err) => {
                this.$Toast({
                    content: err
                })
            })
        }
    }
}
</script>
<style lang="scss" scoped>

.top {
    display: flex;
    padding: 0.37037rem;
    .topLeft {
        flex: 1;
        margin-right: 0.37037rem;
        img {
            width: 100%;
        }
    }
    .topRight {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        h3 {
            font-size: 0.407407rem;
            color: #292929;
        }
        p {
            color: #525252;
        }
    }
}

.divider {
    width: 100%;
    height: 0.37037rem;
    background: #f3f3f3;
}

.content p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0.37037rem;
    font-size: 0.37037rem;
    span:nth-child(1) {
        color: #5c5c5c;
    }
    &:nth-child(1) i {
        color: #fe4f4a;
        letter-spacing: 0.055556rem;
    }
    &:nth-child(2) i {
        color: #ffa800;
        letter-spacing: 0.055556rem;
    }
}

.bottom {
    border-bottom: 1px solid #eee;
    h3 {
        font-size: 0.407407rem;
        margin-bottom: 0.148148rem;
    }
    padding: 0.37037rem;
    p {
        color: #5c5c5c;
        line-height: 0.444444rem;
    }
}

.footer {
    padding: 0.462963rem 1.666667rem;
    display: flex;
    justify-content: space-between;
    button {
        padding: 0.277778rem 0.37037rem;
        border-radius: 0.092593rem;
        color: #fff;
        &:nth-child(1) {
            background: #fe4f4a;
        }
        &:nth-child(2) {
            background: #ffa800;
        }
    }
}
</style>
